<template>
    <div style="margin: 0 20px;">
        <h2>Vue2区别于Vue3的事件绑定方法</h2>
        <p>@before-init.native="onBeforeInit" &nbsp;&nbsp; @after-init.native="onAfterInit" &nbsp;&nbsp; @doc-loaded.native="onDocLoaded"</p>
        <Editor mode="form" @before-init.native="onBeforeInit" @after-init.native="onAfterInit" @doc-loaded.native="onDocLoaded" doc="https://www.x-emr.cn/doc/999.html"  width="80%"></Editor>
        <div>
            <button @click="execCommand('preview')">预览</button>
            <button @click="execCommand('print')">打印</button>
            <button @click="execCommand('exportHtml')">导出html</button>
            <button @click="execCommand('exportPdf')">导出pdf</button>
        </div>
    </div>
</template>

<script>
import Editor from '@/components/Editor.vue'

export default{
    components: {'Editor' : Editor},
    data(){
        return{
            editor:null,
        }
    },
    methods:{
        //初始化前
        onBeforeInit: function(e) {
            //设置参数
            e.editor.option.statusbar = false
        },
        //初始化前
        onAfterInit: function(e) {
            this.editor = e.editor
        },
        //文档加载后
        onDocLoaded: function(e) {
            this.editor.loadUrl('/mock/bind_data.html').then(()=>{
                this.editor.setBindObject('令狐冲','name')
                //this.editor.execCommand('readonly')
            })
        },
        execCommand: function(cmd) {
            this.editor.execCommand(cmd)
        }


    }
}
</script>